<template>
	<div>
		<div class="deng">
			<i class="biao"><span class="iconfont icon-chahao"></span></i>
		</div>
		<div class="zhu">
			<div id="cccc">
				<p>登录/注册</p>
				<i>注册即送2600元新人红包</i>
			</div>

		</div>
		<div  class="vvv">
			<input v-model="username" type="text" id="login" placeholder="手机号">
			<input v-model="password" type="text" id="mi" placeholder="密   码">
		</div>
		<div class="nnn">
			<div @click="save" class="lu"><span class="iconfont icon-jiantou"></span></div>

		</div>
		<div class="wei">
			<span class="iconfont icon-taobao"></span>
			<span class="iconfont icon-umidd17"></span>
			<span class="iconfont icon-weibo"></span>
		</div>
	</div>
</template>
<script>
	import axios from "axios"
	export default{
		data(){
			return {
				username:"",
				password:""
			}
		},
		methods:{
			save(){
				axios.get(`http://jx.xuzhixiang.top/ap/api/login.php?username=${this.username}&password=${this.password}`).then(res=>{
						localStorage.setItem("uid",res.data.data.id)
						localStorage.setItem('username',res.data.data.username)
						localStorage.setItem("token",res.data.data.token)
						this.$router.replace("/index")
					}

				)
			}
		}
	}
</script>
<style scoped>
	.deng{
		width: 3.75rem;
		height: 0.6rem;
		display: flex;
		justify-content: flex-end;

	}
	.biao{
		width: 0.6rem;
		height: 0.6rem;
		text-align: center;
		line-height: 0.6rem;
	}
	.biao span{
		font-size: 0.3rem;
	}
	.zhu{
		width: 3.75rem;
		height: 0.8rem;
		display: flex;
		justify-content: flex-end;

	}
	#cccc{
		width: 3.4rem;
		height: 0.8rem;
		font-size: 0.2rem;
	}
	#cccc p{
		font-size: 0.2rem;
	}
	#cccc i{
		font-size: 0.15rem;
	}
	.vvv{
		width: 3.75rem;
		height: 1.5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#login{
		width: 3rem;
		height: 0.6rem;
		background: #f3f3f3;
		border: 0 ;
    padding-left: 0.1rem;
	}
	#mi{
		width: 3rem;
		height: 0.6rem;
		background: #f5f5f5;
		border: 0;
		line-height: 0.6rem;
    padding-left: 0.1rem;
	}
	.nnn{
		width: 3.75rem;
		height: 0.6rem;
		display: flex;
		justify-content: center;
	}
	.lu{
		width: 3rem;
		height: 0.6rem;
		background: #ccc;
		border: 0;
		line-height: 0.6rem;
		text-align: center;
	}
	.wei{
		width: 3.75rem;
		height: 2.2rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.wei span{
		font-size: 0.3rem;
	}
</style>
